<script setup lang="ts">

import Header from "./Header.vue";
import {messageStore} from "../store";
import MessageFrame from "./MessageFrame.vue";
const store = messageStore()

</script>

<template>
  <div v-if="store.getCurrentUserId !== 0" id="content">
    <Header></Header>
    <MessageFrame></MessageFrame>
  </div>
  <div v-else id="contentBlank">
    <h1>WELCOME TO MINI-CHAT</h1>
  </div>
</template>

<style scoped>
@keyframes circleMove {
  0% {
    clip-path: circle(70px at 0% 50%);
  }
  50% {
    clip-path: circle(70px at 100% 50%);
  }
  0% {
    clip-path: circle(70px at 0% 50%);
  }
}

#content {
  width: calc(100% - 250px);
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

#contentBlank {
  width: calc(100% - 250px);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  h1 {
    position: relative;
    font-size: 3vw;
    &::after {
      content: "WELCOME TO MINI-CHAT";
      top: 0;
      left: 0;
      position: absolute;
      color: #fa3b56;
      animation: circleMove 3s linear infinite;
      background-clip: text;
      -webkit-background-clip: text;
      clip-path: circle(70px at 0% 50%);
    }
  }
}
</style>